<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <pre>
        鼠标事件    onclick onmouseover onmouseout  onmousemove
        键盘事件    onkeydown   onkeyup onkeypress
    </pre>
    <button onclick="dian()">点我</button>
    <button id="btn2">点我2</button>
    <br/>
    <button id="btn3">点我3</button>
    <button id="delbtn">删除监听事件</button>
    <button id="delbtn2">删除按钮2事件</button>

    <!-- 事件绑定练习 留言板-->
    <h1>留言板</h1>
    <input type="text" id="txts" required /><button id="add">ADD</button>
    <hr id="spx"/>
</body>
<script>
    var add=document.querySelector("#add");
    add.addEventListener("click",function(){
        var texts=document.querySelector("#txts");
        console.log(texts.value)//文本框的值
        var p=document.createElement("p");
        var span=document.createElement("span");
        span.innerText=texts.value;
        var delbtns=document.createElement("button");
        var body=document.getElementsByTagName("body");
        delbtns.innerText="DEL";
        p.appendChild(span);
        p.appendChild(delbtns);
        p.className="del";
        body[0].appendChild(p)
        delbtns.addEventListener("click",function(){
            this.parentNode.parentNode.removeChild(this.parentNode);
            //event.srcElement(火狐不支持) || event.currentTarget(IE不支持)  获取事件源触发代码
        })
    })
    //不推荐的写法
    function dian(){
        alert("hello JS")
    }
    //JS绑定
    var btn=document.querySelector("#btn2")
    btn.onclick=function(){
        alert("JS绑定")
    }
    btn.onmouseout=function(){
        alert("鼠标移出")
    }
    //事件监听
    var  btn3=document.querySelector("#btn3");
    function dj1(){
        alert("事件监听click事件")
    }
    function dj2(){
        alert("事件监听click事件2")
    }
    btn3.addEventListener("click",dj1)
    btn3.addEventListener("click",dj2)
    //事件删除
    var delbtn=document.querySelector("#delbtn");
    delbtn.addEventListener("click",function(){
        btn3.removeEventListener("click",dj1);//移除监听事件
    })

    var delbtn2=document.querySelector("#delbtn2");
    delbtn2.onclick=function(){
        btn.onclick=null;
        btn.onmouseout=null;
    }
</script>
</html>